<template>
  <z-paging
    ref="paging"
    v-model="list"
    use-refresher-status-bar-placeholder
    safe-area-inset-bottom
    use-safe-area-placeholder
    :loading-more-enabled="!showHistory"
    :hide-empty-view="showHistory"
    :refresher-enabled="!showHistory"
    :show-loading-more-no-more-view="!showHistory"
    :auto="false"
    @query="getList">
    <search slot="top" v-model="keyWord" :readonly="false" :backPage="false" @back="clearKeyword" @confirm="search" @input="onInput"/>
    <view class="history" v-show="showHistory">
      <view class="fz-32 flex row-between">
        <view class="fz-32">搜索历史</view>
        <view class="iconfont icon-shanchu muted" v-if="historyList.length" @click="removeShow = true"/>
      </view>
      <view class="history-box">
        <view class="history-list" v-if="historyList.length">
          <view class="item" v-for="(item, index) in historyList" :key="index" @click="checkItem(item)">{{item}}</view>
        </view>
        <u-empty mode="order"
                 text="暂无搜索历史"
                 width="400rpx"
                 height="400rpx"
                 margin-top="50%"
                 v-if="!historyList.length"
        />
      </view>
    </view>
    <view class="list" v-show="!showHistory">
      <view class="item" v-for="(item,index) in list" :key="index" @click="toDetail(item)">
        <c-image :src="item.image" mode="aspectFill"/>
        <view class="name">{{item.name}}</view>
      </view>
    </view>
    <c-modal v-model="removeShow" @confirm="removeHistory">确认清空搜索历史吗</c-modal>
  </z-paging>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import {getGoodsList} from "@/api/goods";
export default {
  data() {
    return {
      source: 'xuancai',
      showHistory: true,
      removeShow: false,
      keyWord: '',
      list: []
    };
  },
  computed: {
    ...mapGetters(['materialHistory', 'productHistory']),
    historyList() {
      return this.source == 'xuancai'? this.materialHistory : this.productHistory
    }
  },
  methods: {
    ...mapActions(['setMaterialHistory', 'setProductHistory', 'clearHistory']),
    search(value) {
      if (!this.keyWord) return
      this.showHistory = false
      if (this.source == 'xuancai') {
        this.setMaterialHistory(this.keyWord)
      } else {
        this.setProductHistory(this.keyWord)
      }
      this.$refs.paging.reload()
    },
    checkItem(keyword) {
      this.keyWord = keyword
      this.search()
    },
    clearKeyword() {
      if (this.showHistory) {
        uni.navigateBack()
        return
      }
      this.keyWord = ''
      this.showHistory = true
    },
    onInput(val) {
      if (!val) {
        this.showHistory = true
      }
    },
    removeHistory() {
      this.clearHistory(this.source)
      this.removeShow = false
    },
    getList(pageNo, pageSize) {
      const params = {
        pageNum: pageNo,
        pageSize: pageSize,
        keyWord: this.keyWord,
        type: this.source
      }
      getGoodsList(params).then(res => {
        this.$refs.paging.completeByTotal(res.records || [], res.total);
      })
    },
    toDetail(item) {
      uni.navigateTo({
        url: `/pages/goods/detail?id=${item.id}`
      });
    }
  },
  onLoad(options) {
    this.source = options.source
  },
}
</script>

<style lang="scss">
page {
  background: #f4f4f4;
}
.history {
  background-color: #fff;
  height: 100vh;
  margin-top: 8rpx;
  padding: 18rpx 34rpx;
  .history-box {
    min-height: 500rpx;
  }
  .history-list {
    display: flex;
    margin-top: 24rpx;
    flex-wrap: wrap;
    .item {
      height: 48rpx;
      opacity: 1;
      border-radius: 4rpx;
      background: #F2F0F0;
      line-height: 48rpx;
      padding: 0 8rpx;
      text-align: center;
      color: #808080;
      margin: 0 24rpx 24rpx 0;
    }
  }
}
.list {
  padding: 0 20rpx;
  .item {
    height: 250rpx;
    border-radius: 16rpx;
    overflow: hidden;
    position: relative;
    margin-top: 20rpx;
    .name {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      font-size: 28rpx;
      background: rgba(0,0,0,.5);
      color: #fff;
      padding: 16rpx 20rpx;
    }
  }
}
</style>
